<template>
  <section>
    <div>
      <h2>使用ref包装后的变量：</h2>
      <p>使用ref包装之后的变量（普通变量），可以返回一个双向绑定的“对象”。</p>
      <p>{{ num1 }}</p>
      <p>姓名：{{name}}</p>
      <input v-model="name">
    </div>
  </section>
</template>

<script>
import { ref } from "vue";

export default {
  setup() {
    // ref用于包装一个基础类型变量，返回一个包装对象，
    let num1 = ref(0);

    let name = ref("")

    setInterval(() => {
      // 使用对象.value来修改它的值
      num1.value ++;
    //   console.log(num1);
    }, 1000);

    // setup最后一定要有return返回一个对象，把对象的属性暴露出去
    return { num1,name };
  },
};
</script>

<style>
</style>